<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>纯js实现的富有弹性的横向菜单 - 分享JavaScript-sharejs.com</title> 
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" /> 
<meta name="description" content="纯js实现的富有弹性的横向菜单,JavaScript分享网，js脚本，网页特效，网页模板，png图标，矢量图下载" /> 
<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" /> 
<style>
*{ margin:0px; padding:0px;} 
body { background:#fff;} 
.naver{list-style-type: none; width:700px; overflow:hidden; margin:100px auto 0;} 
.naver li{ width:100px; height:50px; overflow:hidden; font-size:16px; text-align:center; cursor: pointer; } 
.naver li a,.naver li a:hover{display: block;width:100px; height:50px; line-height: 50px; color:#FFF; text-decoration: none; } 
.co1{ background:#649e37} 
.co2{ background:#028fbc} 
</style> 
<script type="text/javascript"> 
window.onload = function() { 
	var oUl = document.getElementById("nav"); 
	var aLi = oUl.getElementsByTagName("li"); 
	var i = 0; 
	for (i = 0; i < aLi.length; i++) { 
		aLi[i].timer = null; aLi[i].speed = 0; 
		aLi[i].onmouseover = function() { 
			startMove(this, 250); 
		}; 
			aLi[i].onmouseout = function() { 
				startMove2(this, 100); 
		}; 
	} 
}; 
function startMove(obj, iTarget) { 
	if (obj.timer) { 
		clearInterval(obj.timer); 
	} 
	obj.timer = setInterval(function() { 
		doMove(obj, iTarget); 
	}, 30) 
}; 
function doMove(obj, iTarget) { 
	obj.speed += 3; 
	if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) { 
		clearInterval(obj.timer); obj.timer = null; 
	} else { 
		if (obj.offsetWidth + obj.speed >= iTarget) { 
			obj.speed *= -0.7; obj.style.width = iTarget + "px"; 
		} else { 
			obj.style.width = obj.offsetWidth + obj.speed + "px"; 
		} 
	} 
}; 
function startMove2(obj, iTarget) { 
	if (obj.timer) { 
		clearInterval(obj.timer); 
	} 
	obj.timer = setInterval(function() { 
		doMove2(obj, iTarget); 
	}, 30) 
}; 
function doMove2(obj, iTarget) { 
	obj.speed -= 3; 
	if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) { 
		clearInterval(obj.timer); obj.timer = null; 
	} else { 
		if (obj.offsetWidth + obj.speed <= iTarget) { 
			obj.speed *= -0.7; obj.style.width = iTarget + "px"; 
		} else { 
			obj.style.width = obj.offsetWidth + obj.speed + "px"; 
		} 
	} 
}; 
</script> </head> <body> <ul id="nav" class="naver"> <li class="co1"> <a href="http://archive.cnblogs.com/a/2653868/"http://www.baidu.com">首页</a> </li> <li class="co2"> <a href="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com/png">png图标</a> </li> <li class="co1"> <a href="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com">脚本特效</a> </li> <li class="co2"> <a href="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com/vector">矢量图</a> </li> <li class="co1"> <a href="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com/template">网站模板</a> </li> </ul> <div style="clear:both"></div> <br><br> <div align="center"> <script language="javascript" src="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com/js/720.js"></script> <br><br> 获取更多JavaScript代码，请登录脚本分享网 <a href="http://archive.cnblogs.com/a/2653868/"http://www.sharejs.com">http://www.sharejs.com</a> <br> 转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！ </div> </body> </html>